<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="initial-scale=1, minimum-scale=1, width=device-width">
<title>$i18n{blockPageTitle}</title>
<link href="https://fonts.googleapis.com/css?family=Google+Sans" rel="stylesheet">
<link rel="stylesheet" href="../../../../../components/security_interstitials/core/common/resources/interstitial_core.css">
<link rel="stylesheet" href="supervised_user_block_interstitial.css">
<script src="../../../../../ui/webui/resources/js/cr.js"></script>
<script src="../../../../../ui/webui/resources/js/assert.js"></script>
<script src="../../../../../ui/webui/resources/js/util.js"></script>
<script src="supervised_user_block_interstitial.js"></script>
</head>
<body class="supervised-user-block">
<div class="frame-blocked" id="frame-blocked" tabindex="-1">
  <div class="message-container">
    <div class="icon" id="icon" aria-hidden="true">
      <img id="family-link-kite">
    </div>
    <picture>
      <source
        srcset="error_page_illustration_dark_theme.svg"
        media="(prefers-color-scheme: dark)">
      <img id="illustration"
        src="error_page_illustration_light_theme.svg">
    </picture>
    <div id="main-message">
      <h1 id="block-page-header" tabindex="-1">$i18n{blockPageHeader}</h1>
      <p id="block-page-message" tabindex="-1">$i18n{blockPageMessage}</p>
      <h1 id="request-failed-message" role="alert" hidden>$i18n{requestFailedMessage}</h1>
      <h1 id="request-sent-message" role="alert" hidden>$i18n{requestSentMessage}</h1>
      <p id="request-sent-description" hidden>$i18n{requestSentDescription}</p>
    </div>
    <div id="custodians-information" hidden>
      <div id="custodian-information" class="custodian-information">
        <img id="custodian-avatar-img" class="avatar-img">
        <div id="custodian-contact" class="custodian-contact">
          <div id="custodian-name" tabindex="-1" class="custodian-name"></div>
          <div id="custodian-email" tabindex="-1" class="custodian-email"></div>
        </div>
      </div>
      <div id="second-custodian-information" class="custodian-information" hidden>
        <img id="second-custodian-avatar-img" class="avatar-img" hidden>
        <div id="second-custodian-contact" class="custodian-contact">
          <div id="second-custodian-name" class="custodian-name"></div>
          <div id="second-custodian-email" class="custodian-email"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container">
    <button id="back-button" class="go-back-button" hidden>
      $i18n{backButton}
    </button>
    <button id="local-approvals-button" class="local-approvals-button" hidden>
      $i18n{localApprovalsButton}
    </button>
    <button id="remote-approvals-button" class="remote-approvals-button" hidden>
      $i18n{remoteApprovalsButton}
    </button>
    <div id="details-button-container">
      <button id="show-details-link" class="details-button small-link" hidden>
        $i18n{showDetailsLink}
      </button>
      <button id="hide-details-link" class="details-button small-link" hidden>
        $i18n{hideDetailsLink}
      </button>
    </div>
  </div>
  <div id="details" hidden>
    <p id="details-header" role="alert" >$i18n{blockReasonHeader}</p>
    <p id="feedback">$i18nRaw{feedbackLink}</p>
  </div>
</div>
</body>
</html>
